<template>
	<view class="padd-box">
		<view class="top-box flexWrap" v-if="storeInfo">
			<view class="flexWarpColumn">
				<view class="store-name"><text>大门</text> ({{storeInfo.shop_name||"---"}})</view>
				<view class="address">{{storeInfo.location||"---"}}</view>
				<view class="open-btn"  @tap="openBigDoor()">
					开门
				</view>
			</view>
			<view class="top-right">
				<image src="../../static/index/moyuLogo.png" class="moyuLogo"></image>
			</view>
		</view>
		<view class="door-box flexWrap">
			<view class="door-item" v-for="(item,index) in doorList" :key="index">
				<view class="room-name">{{item.shop_name}}</view>
				<view class="operate-box flexWrap">
					<view class="operate-item flexWarpCenterColumn" @tap="openRoomDoor(item.id)">
						<view class="operate-img">
							<image src="../../static/index/close-img.png"></image>
						</view>
						<view class="operate-text">开门</view>
					</view>
					<view class="operate-item flexWarpCenterColumn" @tap="openOrClose(item)">
						<view class="operate-img">
							<image src="../../static/index/closelight-img.png" v-if="item.lamp==0"></image>
							<image src="../../static/index/openlight-img.png" v-else></image>
						</view>
						<view class="operate-text">{{item.lamp==0?'开灯':'关灯'}}</view>
					</view>
				</view>
			</view>
			<view class="empty-box" v-if="doorList.length==0">
				<image src="https://static.mo-yu.vip/wechat/images/orderEmpty.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				doorList:[],
				storeInfo:{}
			};
		},
		onLoad() {
			this.getDoorList();
		},
		methods:{
			// 获取门灯列表
			getDoorList(){
				this.$tools.loadIng()
				this.$request.post(this.$api.doorList, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					if (res.code==1) {
						let {
							data = {}
						} = res;
						this.doorList=data.equipment_list
						this.storeInfo=data.store_info||""
					}
				})
			},
			// 开大门
			openBigDoor(){
				uni.showLoading({
					title:'开门中，请稍等',
					mask:true
				})
				this.$request.post(this.$api.openBigDoor, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					console.log(res)
					if (res.code==1) {
						this.$tools.hideLoading()
						this.$tools.showToast('开门成功')
					}
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			// 开关灯
			openOrClose(item){
				if(item.lamp==0){
					this.openRoomLamp(item.id)
				}else{
					this.closeRoomLamp(item.id)
				}
			},
			// 包房开门
			openRoomDoor(equipment_id){
				uni.showLoading({
					title:'开门中，请稍等',
					mask:true
				})
				this.$request.post(this.$api.openRoomDoor, {
					equipment_id:equipment_id
				}, {
					token:true
				}).then(res => {
					console.log(res)
					if (res.code==1) {
						this.$tools.hideLoading()
						this.$tools.showToast('开门成功')
					}
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			// 包房开灯
			openRoomLamp(equipment_id){
				uni.showLoading({
					title:'开灯中，请稍等',
					mask:true
				})
				this.$request.post(this.$api.openRoomLamp, {
					equipment_id:equipment_id
				}, {
					token:true
				}).then(res => {
					console.log(res)
					if (res.code==1) {
						this.$tools.hideLoading()
						this.$tools.showToast('开灯成功')
						setTimeout(()=>{
							this.getDoorList();
						},2000)
					}
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			// 包房关灯
			closeRoomLamp(equipment_id){
				uni.showLoading({
					title:'关灯中，请稍等',
					mask:true
				})
				this.$request.post(this.$api.closeRoomLamp, {
					equipment_id:equipment_id
				}, {
					token:true
				}).then(res => {
					console.log(res)
					if (res.code==1) {
						this.$tools.hideLoading()
						this.$tools.showToast('关灯成功')
						setTimeout(()=>{
							this.getDoorList();
						},2000)
					}
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			}
		}
	}
</script>

<style lang="scss">
	.empty-box{
		width: 476upx;
		height: 280upx;
		margin:250upx auto;
	}
	.padd-box{
		padding: 36rpx;
	}
	.top-box{
		height: 246rpx;
		background: linear-gradient(136deg, #481DBC 0%, #19A4E8 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 28rpx;
		position: relative;
		.store-name{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text{
				font-size: 48rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-right: 18rpx;
			}
		}
		.address{
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-top: 12rpx;
			margin-bottom: 52rpx;
		}
		.open-btn{
			width: 240rpx;
			height: 68rpx;
			line-height: 68rpx;
			text-align: center;
			background: #26BCFD;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		.top-right{
			position: absolute;
			top: 0;
			bottom: 0;
			right: 20rpx;
			width: 276rpx;
			height: 200rpx;
			margin: auto;
		}
		.moyuLogo{
			width: 276rpx;
			height: 200rpx;
		}
	}
	.door-box{
		margin-top: 36rpx;
		flex-wrap: wrap;
		.door-item{
			width: 264rpx;
			height: 264rpx;
			background: #353484;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 28rpx;
			margin-bottom: 36rpx;
			.room-name{
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				@include ellipsis(1);
			}
			.operate-box{
				margin-top: 48rpx;
				.operate-item{
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					.operate-img{
						width: 126rpx;
						height: 126rpx;
						margin-bottom: 14rpx;
					}
				}
			}
		}
	}
</style>
